<template>
  <div class="DetailNavBar">
  <navBar>
      <div slot="left" class="back" @click="backClick"><img src="@/assets/img/common/back.svg" alt=""></div>
      <div slot="center" class="title">
          <div v-for="(item,index) in titles"
           class="item"
           @click="titleClick(index)"
           :class="{active:currentIndex==index}">
          {{item}}</div>
      </div>

  </navBar>
  </div>
</template>

<script>
import NavBar from '@/components/common/navbar/NavBar'
  export default {
  name:'DetailNavBar',
   components:{
    NavBar,
   },
   data() {
    return {
      titles:['商品','参数','评论','推荐'],
      currentIndex:0
    }
  },
  methods:{

   backClick(){
      this.$router.back()
   },

   titleClick(index){
          this.currentIndex =index
          this.$emit('titleClick',index)
   }

  }



  }
</script>

<style scoped>
.DetailNavBar{
background-color: #f0e9e9;
position: relative;
z-index: 14;
}

.back img{
height: 20px;
width: 20px;
margin-top: 11px;
}
.title{
display: flex;
color: rgb(66, 66, 66);

}
.item{
flex: 1;

}
.active{

 color: red;
}


</style>
